<template>
  <div>
    <div class="header_box">
      <span @click="$router.go(-1)" v-if="$route.path!='/home'" class="goback">
        <van-icon style="margin-right:3px;" name="arrow-left" />
        返回
      </span>
      真香商城
    </div>
    <router-view></router-view>
    <!-- 底部 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/home"><i class="iconfont icon-shouye"></i>首页</van-tabbar-item>
      <van-tabbar-item @click="logout"><i class="iconfont icon-huiyuan"></i>会员</van-tabbar-item>
      <van-tabbar-item  to="/classify"><i class="iconfont icon-icon_category"></i>分类</van-tabbar-item>
      <van-tabbar-item :badge="count" to="/cart"><i class="iconfont icon-gouwuche"></i>购物车</van-tabbar-item>
      <van-tabbar-item to="/search"><i class="iconfont icon-sousuo"></i>搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    logout () {
      if (window.sessionStorage.getItem('token')) {
        this.$router.push('/vip')
        return
      }
      this.$router.push('/login')
    }

  },
  computed: {
    ...mapState(['count'])
  }
}
</script>
<style lang="less" scoped>
.header_box {
  width:100%;
  height:40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top:0;
  left:0;
  z-index:1;
}
.goback {
  position: fixed;
  top:0px;
  display: flex;
  align-items: center;
  left:15px;
}
.iconfont {
  display: block;
  font-size: 20px;
  margin: 0 auto 5px;
}

</style>
